{% include 'include/head.html' %}
<!-- Page Container START -->
            <div class="page-container">
                <!-- Content Wrapper START -->
                <div class="main-content">
                    <div class="page-header">
                        <h2 class="header-title">盘点单明细表</h2>
                        <div class="header-sub-title">
                            <button class="btn btn-secondary btn-tone m-r-5" id="save" >提交</button>
                             <a onclick="openBrowse()">
                                <button class="btn btn-secondary btn-tone m-r-5">导入明细单
                                </button>
                             </a>
                            <input type="file" id="file" style="position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;display: none;"/>
                            <input type="text" id="filename" style="display: none;"/>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <h4>盘点单明细表</h4>
                            <div class="m-t-25">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-row">
                                            <div class="form-group m-b-15 col-md-6">
                                                <label>盘点单号</label>
                                               <input type="text" class="form-control" placeholder="盘点单号" id="no" value="{{ pdid }}" disabled="disabled">
                                            </div>
                                            <div class="form-group m-b-15 col-md-6">
                                                <label>盘点店铺</label>
                                                 <input type="text" class="form-control" placeholder="盘点店铺" id="store" value="{{ info.name }}" disabled="disabled">
                                            </div>
                                        </div>
                                        <div class="m-b-15">
                                            <label>款号</label>
                                            <input type="text" class="form-control" placeholder="款号" id="sn">
                                            <br>
                                            <div class="checkbox">
                                                <input id="checkbox1" type="checkbox">
                                                <label for="checkbox1">反扫描</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="m-t-25">
                                <table id="table" class="table">
                                    <thead>
                                        <tr>
                                            <th>款号</th>
                                            <th>实际数量</th>
                                            <th>盘点数量</th>
                                             <th>差异数量</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for item in re   %}
                                            <tr id = "{{ item.sku }}">
                                                <td class = "sku">{{ item.sku }}</td>
                                                <td class = "num">{{ item.num }}</td>
                                                <td class = "pdnum">0</td>
                                                <td class = "cynum">-{{ item.num }}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th>款号</th>
                                            <th>实际数量</th>
                                            <th>盘点数量</th>
                                             <th>差异数量</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Content Wrapper END -->
                {% csrf_token %}
                <!-- Footer START -->
                <footer class="footer">
                    <div class="footer-content">
                        <p class="m-b-0">Copyright © 2019 Theme_Nate. All rights reserved.</p>
                        <span>
                            <a href="" class="text-gray m-r-15">Term &amp; Conditions</a>
                            <a href="" class="text-gray">Privacy &amp; Policy</a>
                        </span>
                    </div>
                </footer>
                <!-- Footer END -->

            </div>
            <!-- Page Container END -->

        </div>
    </div>


    <!-- Core Vendors JS -->
    <script src="/static/assets/js/vendors.min.js"></script>

    <!-- page js -->
    <script src="/static/assets/vendors/datatables/jquery.dataTables.min.js"></script>
    <script src="/static/assets/vendors/datatables/dataTables.bootstrap.min.js"></script>
    <script src="/static/assets/js/pages/datatables.js"></script>
    <script src="/static/assets/vendors/select2/select2.min.js"></script>
    <script src="/static/excel/xlsx.core.min.js"></script>
    <script src="/static/assets/js/jquery.tabletojson.min.js"></script>
    <!-- Core JS -->
    <script src="/static/assets/js/app.min.js"></script>
    <script>
        $(document).ready(
            $("#sn").keydown(function(event) {
                if (event.keyCode == 13) {
                    var sn =  $("#sn").val()
                    if($("#sn").val()!=""){
                         var trlist = $("#table").find("tr");
                         var i=0;
                         var s = 0;
                         for(i=0;i<trlist.length;i++){
                            if($(trlist[i]).children(".sku").text() == sn){
                                s = 1;
                                //alert($("#sn").val());
                                var num  = $(trlist[i]).children(".num").text();
                                var pdnum = $(trlist[i]).children(".pdnum").text();
                                var cynum = $(trlist[i]).children(".cynum").text();

                                if($('#checkbox1').is(':checked')) {
                                    pdnum = parseInt(pdnum)-1;
                                    cynum = pdnum-num;
                                    alert("反操作");
                                }else{
                                   pdnum = parseInt(pdnum)+1;
                                    cynum = pdnum-num;
                                    console.log("正操作");
                                }
                                $(trlist[i]).children(".pdnum").text("");
                                $(trlist[i]).children(".cynum").text("");
                                $(trlist[i]).children(".pdnum").text(pdnum);
                                $(trlist[i]).children(".cynum").text(cynum);
                                $("#sn").val("");
                                if(cynum == 0){
                                    $(trlist[i]).css({color:"green"});
                                }
                                else{
                                    $(trlist[i]).css({color:"red"});
                                }
                                break;
                            }
                        }
                        if(s == 0){
                             var tablelist = '';
                             tablelist += "<tr>";
                             tablelist += "<td>"+sn+"</td><td>0</td><td>1</td><td>1</td>";
                             tablelist += "</tr>";
                             $("#table tbody").append(tablelist);
                             $("#sn").val("");
                        }
                    }
                }
            })
        );
        function removeSelf(_this){
            var that = $(_this).parent('td').parent('tr');
            that.remove();
            num = parseInt($("#totle").text());
            $("#totle").text(num-1)
        }
    </script>

    <script>
        function openBrowse(){
            $("#file").click();
            var ie = navigator.appName = "Microsoft Internet Explorer"?true:false;
            if(ie)
            {
                {#document.getElementById("fileName").value = document.getElementById("file").value;#}
            }else{
                var a = document.createEvent("MouseEvents");
                a.initEvent("click",true,true);
                document.getElementById("file").dispatchEvent(a);
            }
        }
    </script>
    <script type="text/javascript">
        $('#file').change(function(e) {
            var files = e.target.files;
            var fileReader = new FileReader();
            fileReader.onload = function(ev) {
                try {
                    var data = ev.target.result,
                        workbook = XLSX.read(data, {
                            type: 'binary'
                        }), // 以二进制流方式读取得到整份excel表格对象
                        persons = []; // 存储获取到的数据
                } catch (e) {
                    console.log('文件类型不正确');
                    console.log(ev.target.result);
                    return;
                }
                // 表格的表格范围，可用于判断表头是否数量是否正确
                var fromTo = '';
                // 遍历每张表读取
                for (var sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        fromTo = workbook.Sheets[sheet]['!ref'];
                        console.log(fromTo);
                        persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                        console.log(persons);
                        // break; // 如果只取第一张表，就取消注释这行
                    }
                }
                $('.content').text(JSON.stringify(persons))
                //console.log(JSON.stringify(persons));
                var tablelist = '';
                var totle = 0;
                $.each(persons,function(idx,obj){
                    sn = obj.款号;
                    console.log(sn)
                     var trlist = $("#table").find("tr");
                     var i=0;
                     var s = 0;
                     for(i=0;i<trlist.length;i++){
                        if($(trlist[i]).children(".sku").text() == sn){
                            s = 1;
                            //alert($("#sn").val());
                            var num  = $(trlist[i]).children(".num").text();
                            var pdnum = $(trlist[i]).children(".pdnum").text();
                            var cynum = $(trlist[i]).children(".cynum").text();

                            if($('#checkbox1').is(':checked')) {
                                pdnum = parseInt(pdnum)-1;
                                cynum = pdnum-num;
                            }else{
                               pdnum = parseInt(pdnum)+1;
                                cynum = pdnum-num;
                            }
                            $(trlist[i]).children(".pdnum").text("");
                            $(trlist[i]).children(".cynum").text("");
                            $(trlist[i]).children(".pdnum").text(pdnum);
                            $(trlist[i]).children(".cynum").text(cynum);
                            $("#sn").val("");
                            if(cynum == 0){
                                $(trlist[i]).css({color:"green"});
                            }
                            else{
                                $(trlist[i]).css({color:"red"});
                            }
                            break;
                        }
                    }
                });
            };
            // 以二进制方式打开文件
            fileReader.readAsBinaryString(files[0]);
        });
    </script>
<script>
        $(function() {
            $("#save").click(function(){
                $("#save").attr('disabled',true)
                var table = $('#table').tableToJSON(); // Convert the table into a javascript object
                console.log(table);
                var list = JSON.stringify(table);
                var csrf = $('[name="csrfmiddlewaretoken"]').val();
                //alert(fields);
                $.ajax({
                type: "POST",
                data: {data : list,csrfmiddlewaretoken:csrf},
                dataType: "json",
                success:function (message) {
                    alert(message.re);
                    $("#save").attr('disabled',false)
                },
                error:function (message) {
                    alert("提交失败"+message.re);
                    $("#save").attr('disabled',false)
                }
                });
            });
        });
    </script>
</body>

</html>